<template>
  <div>
    <a-tabs
      v-model:activeKey="activeKey"
      tab-position="top"
      :tabBarGutter="130"
      @change="activeKeyChange"
      style="background-color: #fff;padding: 10px;height: 110vh"
    >
      <a-tab-pane key="1" tab="待发货">
        <a-table
          :data-source="shipData"
          :loading="shipLoading"
          :pagination="false"
          :scroll="{ y: 500 }"
        >
          <a-table-column
            fixed="left"
            key="image"
            title="商品信息"
            data-index="image"
            :ellipsis="true"
            width="300px"
          >
            <template #default="{ record }">
              <a-image :width="100" :src="record.image" />
              <span style="margin-left: 10px">{{ record.name }}</span>
            </template>
          </a-table-column>
          <a-table-column fixed="left" key="status" title="详情">
            <template #default="{ record }">
              <router-link to="" @click="toDetail(record.goodsId)">
                <a-tag color="purple">
                  <span style="font-size: 14px">详情</span></a-tag
                >
              </router-link>
            </template>
          </a-table-column>
          <a-table-column key="price" title="单价" data-index="price">
            <template #default="{ record }">
              <a-tag color="#f40">
                <template #icon>
                  <PayCircleOutlined />
                </template>
                <span style="font-size: 14px; font-weight: bold">{{
                  towNumber(record.price)
                }}</span>
              </a-tag>
            </template>
          </a-table-column>
          <a-table-column
            key="number"
            width="100px"
            title="数量"
            data-index="number"
          >
            <template #default="{ record }">
              <a-tag color="blue">
                <span style="font-size: 14px; font-weight: bold">{{
                  record.number
                }}</span>
              </a-tag>
            </template>
          </a-table-column>
          <a-table-column
            :ellipsis="true"
            key="subTotalPrice"
            title="金额"
            data-index="subTotalPrice"
          >
            <template #default="{ record }">
              <a-tag color="#f40">
                <template #icon>
                  <PayCircleOutlined />
                </template>
                <span style="font-size: 14px; font-weight: bold">{{
                  towNumber(record.subTotalPrice)
                }}</span>
              </a-tag>
            </template>
          </a-table-column>
          <a-table-column fixed="right" key="id" title="状态">
            <template #default="{ record }">
              <a-tag color="green">
                <span style="font-size: 14px; font-weight: bold">{{
                  record.status
                }}</span>
              </a-tag>
            </template>
          </a-table-column>
        </a-table>
      </a-tab-pane>

      <a-tab-pane key="2" tab="待收货">
        <a-table
          :data-source="takeData"
          :loading="takeLoading"
          :pagination="false"
          :scroll="{ y: 500 }"
        >
          <a-table-column
            fixed="left"
            key="image"
            title="商品信息"
            data-index="image"
            :ellipsis="true"
            width="350px"
          >
            <template #default="{ record }">
              <a-image :width="100" :src="record.image" />
              <span style="margin-left: 10px">{{ record.name }}</span>
            </template>
          </a-table-column>
          <a-table-column fixed="left" key="status" title="详情">
            <template #default="{ record }">
              <router-link to="" @click="toDetail(record.goodsId)">
                <a-tag color="purple">
                  <span style="font-size: 14px">详情</span></a-tag
                >
              </router-link>
            </template>
          </a-table-column>
          <a-table-column
            width="140px"
            key="price"
            title="单价"
            data-index="price"
          >
            <template #default="{ record }">
              <a-tag color="#f40">
                <template #icon>
                  <PayCircleOutlined />
                </template>
                <span style="font-size: 14px; font-weight: bold">{{
                  towNumber(record.price)
                }}</span>
              </a-tag>
            </template>
          </a-table-column>
          <a-table-column
            key="number"
            width="100px"
            title="数量"
            data-index="number"
          >
            <template #default="{ record }">
              <a-tag color="blue">
                <span style="font-size: 14px; font-weight: bold">{{
                  record.number
                }}</span>
              </a-tag>
            </template>
          </a-table-column>
          <a-table-column
            :ellipsis="true"
            key="subTotalPrice"
            title="金额"
            data-index="subTotalPrice"
          >
            <template #default="{ record }">
              <a-tag color="#f40">
                <template #icon>
                  <PayCircleOutlined />
                </template>
                <span style="font-size: 14px; font-weight: bold">{{
                  towNumber(record.subTotalPrice)
                }}</span>
              </a-tag>
            </template>
          </a-table-column>
          <a-table-column width="100px" fixed="right" key="id" title="状态">
            <template #default="{ record }">
              <a-tag color="green">
                <span style="font-size: 14px; font-weight: bold">{{
                  record.status
                }}</span>
              </a-tag>
            </template>
          </a-table-column>
          <a-table-column fixed="right" key="id" title="操作">
            <template #default="{ record }">
              <a-popconfirm
                placement="left"
                title="确认收货?"
                ok-text="确认"
                cancel-text="取消"
                @confirm="confirmTake(record.goodsId, record.orderId)"
                @cancel="cancel"
              >
                <a-button href="#" type="primary" size="small" danger
                  >确认收货</a-button
                >
              </a-popconfirm>
            </template>
          </a-table-column>
        </a-table>
      </a-tab-pane>

      <a-tab-pane key="3" tab="待评价">
        <a-table
          :data-source="commentData"
          :loading="commentLoading"
          :pagination="false"
          :scroll="{ y: 500 }"
        >
          <a-table-column
            fixed="left"
            key="image"
            title="商品信息"
            data-index="image"
            :ellipsis="true"
            width="300px"
          >
            <template #default="{ record }">
              <a-image :width="100" :src="record.image" />
              <span style="margin-left: 10px">{{ record.name }}</span>
            </template>
          </a-table-column>
          <a-table-column fixed="left" key="status" title="详情">
            <template #default="{ record }">
              <router-link to="" @click="toDetail(record.goodsId)">
                <a-tag color="purple">
                  <span style="font-size: 14px">详情</span></a-tag
                >
              </router-link>
            </template>
          </a-table-column>
          <a-table-column
            width="140px"
            key="price"
            title="单价"
            data-index="price"
          >
            <template #default="{ record }">
              <a-tag color="#f40">
                <template #icon>
                  <PayCircleOutlined />
                </template>
                <span style="font-size: 14px; font-weight: bold">{{
                  towNumber(record.price)
                }}</span>
              </a-tag>
            </template>
          </a-table-column>
          <a-table-column
            key="number"
            width="100px"
            title="数量"
            data-index="number"
          >
            <template #default="{ record }">
              <a-tag color="blue">
                <span style="font-size: 14px; font-weight: bold">{{
                  record.number
                }}</span>
              </a-tag>
            </template>
          </a-table-column>
          <a-table-column
            :ellipsis="true"
            key="subTotalPrice"
            title="金额"
            data-index="subTotalPrice"
          >
            <template #default="{ record }">
              <a-tag color="#f40">
                <template #icon>
                  <PayCircleOutlined />
                </template>
                <span style="font-size: 14px; font-weight: bold">{{
                  towNumber(record.subTotalPrice)
                }}</span>
              </a-tag>
            </template>
          </a-table-column>
          <a-table-column key="status" title="状态">
            <template #default="{ record }">
              <a-tag color="green">
                <span style="font-size: 14px; font-weight: bold">{{
                  record.status
                }}</span>
              </a-tag>
            </template>
          </a-table-column>
          <a-table-column fixed="right" key="action" title="操作">
            <template #default="{ record }">
              <a-button
                @click="doComment(record.goodsId, record.orderId)"
                type="primary"
                size="small"
                ghost
                >点击评价</a-button
              >
            </template>
          </a-table-column>
        </a-table>
      </a-tab-pane>

      <a-tab-pane key="4" tab="已完结">
        <a-table
          :data-source="endData"
          :loading="endLoading"
          :pagination="false"
          :scroll="{ y: 500 }"
        >
          <a-table-column
            fixed="left"
            key="image"
            title="商品信息"
            data-index="image"
            :ellipsis="true"
            width="400px"
          >
            <template #default="{ record }">
              <a-image :width="100" :src="record.image" />
              <span style="margin-left: 10px;font-weight: bold;">{{ record.name }}</span>
            </template>
          </a-table-column>
          <a-table-column fixed="left" key="status" title="详情">
            <template #default="{ record }">
              <router-link to="" @click="toDetail(record.goodsId)">
                <a-tag color="purple">
                  <span style="font-size: 14px">详情</span></a-tag
                >
              </router-link>
            </template>
          </a-table-column>
          <a-table-column key="price" title="单价" data-index="price">
            <template #default="{ record }">
              <a-tag color="#f40">
                <template #icon>
                  <PayCircleOutlined />
                </template>
                <span style="font-size: 14px; font-weight: bold">{{
                  towNumber(record.price)
                }}</span>
              </a-tag>
            </template>
          </a-table-column>
          <a-table-column
            key="number"
            width="100px"
            title="数量"
            data-index="number"
          >
            <template #default="{ record }">
              <a-tag color="blue">
                <span style="font-size: 14px; font-weight: bold">{{
                  record.number
                }}</span>
              </a-tag>
            </template>
          </a-table-column>
          <a-table-column
            :ellipsis="true"
            key="subTotalPrice"
            title="金额"
            data-index="subTotalPrice"
          >
            <template #default="{ record }">
              <a-tag color="#f40">
                <template #icon>
                  <PayCircleOutlined />
                </template>
                <span style="font-size: 14px; font-weight: bold">{{
                  towNumber(record.subTotalPrice)
                }}</span>
              </a-tag>
            </template>
          </a-table-column>
          <a-table-column fixed="right" key="id" title="状态">
            <template #default="{ record }">
              <a-tag color="green">
                <span style="font-size: 14px; font-weight: bold">{{
                  record.status
                }}</span>
              </a-tag>
            </template>
          </a-table-column>
        </a-table>
      </a-tab-pane>
    </a-tabs>
  </div>
  <!-- 评价弹框 -->
  <div>
    <a-modal
      v-model:open="modalVisible"
      title="评价"
      centered
      cancelText="取消"
      okText="确认"
      @ok="saveComment"
      @cancel="handleCancel"
    >
      <a-form ref="formRef" :model="comments" :rules="rules">
        <a-form-item ref="comment" name="comment">
          <a-textarea
            v-model:value="comments.comment"
            placeholder="评价内容"
            :rows="4"
          />
        </a-form-item>
        <a-form-item label="评分" ref="score" name="score">
              <a-rate v-model:value="comments.score" allow-half />
            </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script setup>
import { PayCircleOutlined, SmileOutlined } from "@ant-design/icons-vue";
import { ref, onMounted, h } from "vue";
import { useUserStore } from "@/stores/user";
import { message, notification } from "ant-design-vue";
import {
  getWaitDelivery,
  getWaitTake,
  getWaitComment,
  getEnd,
  confirmTakeGoods,
} from "@/api/usergoodslog";
import { saveComments } from "@/api/comment";
import router from "@/router";

const userStore = useUserStore();
const activeKey = ref("1");
onMounted(() => {
  getWaitDeliveryGoods();
});

//监听标签页改变
function activeKeyChange(key) {
  switch (key) {
    case "1":
      getWaitDeliveryGoods();
      break;
    case "2":
      notification.open({
        message: "温馨提示",
        description: "待收货区域点击操作可确认收货",
        duration: 10,
        placement: "topRight",
        icon: () =>
          h(SmileOutlined, {
            style: "color: green",
          }),
      });
      getWaitTakeGoods();
      break;
    case "3":
      getWaitCommentGoods();
      break;
    case "4":
      getEndGoods();
      break;
    default:
      break;
  }
}

const shipLoading = ref(true);
//获取待发货商品数据
const shipData = ref([]);
function getWaitDeliveryGoods() {
  setTimeout(() => {
    getWaitDelivery(userStore.user.key).then((res) => {
      if (res.code === 200) {
        shipData.value = res.data;
      }
    });
    shipLoading.value = false;
  }, 1000);
}

//获取待收货商品数据
const takeLoading = ref(true);
const takeData = ref([]);
function getWaitTakeGoods() {
  setTimeout(() => {
    getWaitTake(userStore.user.key).then((res) => {
      if (res.code === 200) {
        takeData.value = res.data;
      }
    });
    takeLoading.value = false;
  }, 1000);
}

//获取待评价商品数据
const commentLoading = ref(true);
const commentData = ref([]);
function getWaitCommentGoods() {
  setTimeout(() => {
    getWaitComment(userStore.user.key).then((res) => {
      if (res.code === 200) {
        commentData.value = res.data;
      }
    });
    commentLoading.value = false;
  }, 1000);
}

//获取已完结商品数据
const endLoading = ref(true);
const endData = ref([]);
function getEndGoods() {
  setTimeout(() => {
    getEnd(userStore.user.key).then((res) => {
      if (res.code === 200) {
        endData.value = res.data;
      }
    });
    endLoading.value = false;
  }, 1000);
}

//确认收货
function confirmTake(goodId, orderId) {
  confirmTakeGoods(goodId, orderId).then((res) => {
    if (res.code === 200) {
      message.success("确认收货成功!");
      getWaitTakeGoods();
    }
  });
}

//点击商品评价
const commentGoodsId = ref(null);
const commentRderId = ref(null);
function doComment(goodsId, orderId) {
  modalVisible.value = true;
  commentGoodsId.value = goodsId;
  commentRderId.value = orderId;
}
const modalVisible = ref(false);
const comments = ref({
  comment: "",
  score: null,
  userId: null,
  goodsId: null,
  orderId: null,
});
//评价保存
function saveComment() {
  formRef.value
    .validate()
    .then(() => {
      comments.value.userId = userStore.user.key;
      comments.value.goodsId = commentGoodsId.value;
      comments.value.orderId = commentRderId.value;
      saveComments(comments.value).then((res) => {
        if (res.code === 200) {
          message.success("评价成功！");
          modalVisible.value = false;
          comments.value = {};
          getWaitCommentGoods();
        }
      });
    })
    .catch((error) => {
      console.log("error", error);
    });
}

//取消评价
function handleCancel() {
  modalVisible.value = false;
  comments.value = {};
}

const formRef = ref();
const rules = {
  comment: [
    {
      required: true,
      message: "请输入评价内容",
      trigger: "change",
    },
  ],
  score: [
    {
      required: true,
      message: "请选择评分",
      trigger: "change",
    },
  ],
};

//跳往商品详情
function toDetail(id) {
  router.push({ name: "Detail", query: { id: id } });
}

//展示价格的小数方法
function towNumber(val) {
  return val.toFixed(2);
}
</script>
<style scoped>
</style>